import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadTodos } from "../store/todos.slice";
function TodoMain() {
  // 从store当中获取状态
  const todos = useSelector((state) => state.todos);
  console.log("todos:", todos);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadTodos("http://localhost:3001/todos"));
  }, [dispatch]);
  return (
    <section className='main'>
      <input className='toggle-all' type='checkbox' />
      <ul className='todo-list'>
        {todos.map((todo, index) => {
          return (
            <li key={index} className='completed'>
              <div className='view'>
                <input type='checkbox' className='toggle' />
                <label>{todo.title}</label>
                <button className='destroy'></button>
              </div>
              <input className='edit' />
            </li>
          );
        })}
      </ul>
    </section>
  );
}
export default TodoMain;
